<template>
    <div class="app-container">
        <!-- 巡查记录管理 -->
        <el-row>
            <el-col :span="24">
                <el-form ref="queryParamsRef" :inline="true" :model="queryParams">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="被巡查单位" label-width="88px">
                                <el-tree-select v-model="queryParams.bxcunitId" :data="UnitOptions"
                                    :props="{ value: 'deptId', label: 'deptName', children: 'children' }"
                                    placeholder="请选择被巡查单位" check-strictly default-expand-all clearable
                                    style="width:260px;margin-right: 15px;" @change="getLists" />
                                <el-checkbox @change="getLists" v-model="isunitIdChild" label="含下级" size="large" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查场所">
                                <el-input v-model="queryParams.xcplace" style="width: 260px" clearable @clear="getLists"
                                    @keydown.enter.prevent="getLists" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查结果">
                                <el-select v-model="queryParams.res" placeholder="选择巡查结果" @change="getLists"
                                    style="width: 260px" clearable>
                                    <el-option v-for="item in nj_xcresult" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="巡查类型" label-width="88px">
                                <el-select v-model="queryParams.xctype" placeholder="选择巡查类型" @change="getLists"
                                    style="width: 260px" clearable>
                                    <el-option v-for="item in nj_xc_type" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-form-item>
                            <el-button type="primary" @click="getLists">
                                <el-icon class="me-1">
                                    <Search />
                                </el-icon>
                                查询
                            </el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="handleRest()">
                                <el-icon class="me-1">
                                    <Refresh />
                                </el-icon>
                                重置
                            </el-button>
                        </el-form-item>
                    </el-row>
                </el-form>
            </el-col>
        </el-row>
        <el-divider class="mt-0 mb-3" />
        <el-space class="mb-3">
            <!-- <el-button type="primary" plain icon="Plus" @click="RecordManageDetailRef.showAdd('新增巡查记录',)">
                新增巡查记录
            </el-button> -->
        </el-space>
        <el-table :data="tableData" v-loading="loading"
        @row-dblclick="handleRowDblClick"
            stripe
            :row-style="tableRowStyle"
             border>
            <el-table-column prop="xcunitId" label="巡查单位" />
            <el-table-column prop="bxcunitId" label="被巡查单位" />
            <el-table-column prop="xcplace" label="巡查场所" />
            <el-table-column prop="xcuserId" label="核定人" />
            <el-table-column prop="xcdatetime" label="巡查时间" />
            <!-- <el-table-column prop="adddate" label="巡查案件"/> -->
            <!-- <el-table-column prop="res" label="巡查结果"/> -->
            <el-table-column label="巡查结果" prop="res">
                <template #default="scope">
                    <dict-tag :options="nj_xcresult" :value="scope.row.res" />
                </template>
            </el-table-column>
            <el-table-column label="巡查结果状态" prop="state">
                <template #default="scope">
                    <dict-tag :options="nj_xcresult_state" :value="scope.row.state" />
                </template>
            </el-table-column>
            <el-table-column label="操作" width="140" align="center">
                <template #default="scope">
                    <el-button type="primary" size="small" link
                        @click="RecordManageDetailRef.showDetail(scope.row, '巡查记录详情', 'See')" v-if="scope.row.res == 1">
                        <el-icon class="me-1">
                            <View />
                        </el-icon>
                        详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <pagination v-show="total > 0" v-model:page="paging.pageNum" v-model:limit="paging.pageSize" :total="total"
            @pagination="getLists" />
        <RecordManageDetail ref="RecordManageDetailRef" />
    </div>
</template>

<script setup>
import { getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance()
import { listDept } from "@/api/system/dept";
import { recordList } from "@/api/monitors/monitors.js";
import RecordManageDetail from "@/views/OnlineCheck/RecordManage/components/RecordManageDetail.vue";
import PageEnum from "@/enum/PageEnum.js";

const { nj_yuan_type, sys_yes_no, nj_xcresult, nj_xc_type, nj_xcresult_state } = proxy.useDict('nj_yuan_type', 'sys_yes_no', 'nj_xcresult', 'nj_xc_type', 'nj_xcresult_state')

const loading = ref(false)
const total = ref(0)
const RecordManageDetailRef = ref({})
const UnitOptions = ref([])


const isunitIdChild = ref(false)
const paging = ref({
    // 页码
    pageNum: 1,
    // 分页数量
    pageSize: PageEnum.SIZE
})

const searchTime = ref([])
const queryParams = ref({
    xctype: '',       //巡查类型1、实时人工 2、历史自动
    bxcunitId: '',   // 被巡查单位
    // 巡查场所
    xcplace: '',
    // 巡查结果
    res: '',
    // params: {
    //     'beginTime': '',
    //     'endTime': ''
    // }
})

const tableData = ref([{}])

onMounted(() => {
    getLists()
    getDeptTree()
})
// 斑马纹样式函数
const tableRowStyle = ({ row, rowIndex }) => {
    if (rowIndex % 2 === 0) {
        return { backgroundColor: '#e6ecff' }; // 偶数行背景色
    }
    return {}; // 奇数行默认透明
}
const handleRowDblClick = (row) => {
    RecordManageDetailRef.value.showDetail(row, '巡查记录详情', 'See')
}
/** 查询部门下拉树结构 */
const getDeptTree = async () => {
    await listDept().then(res => {
        UnitOptions.value = res.data.filter(
            item => item.isUnit === true
        );
        UnitOptions.value = proxy.handleTree(UnitOptions.value, "deptId");
    });
}

// 获取列表
const getLists = async () => {
    var queryParamsdata = {}
    if (isunitIdChild.value) {
        queryParamsdata = {
            unitIdChild: queryParams.value.bxcunitId,
            res: queryParams.value.res || '',
            xcplace: queryParams.value.xcplace,
            xctype: queryParams.value.xctype
        }
    } else {
        queryParamsdata = {
            xcunitId: queryParams.value.bxcunitId,
            res: queryParams.value.res || '',
            xcplace: queryParams.value.xcplace,
            xctype: queryParams.value.xctype
        }
    }
    loading.value = true
    const res = await recordList(queryParamsdata, paging.value)
    tableData.value = res.rows
    total.value = res.total
    loading.value = false
}

const handleRest = async () => {
    queryParams.value.bxcunitId = ''
    queryParams.value.isunitIdChild = ''
    queryParams.value.xcplace = ''
    queryParams.value.res = ''
    queryParams.value.xctype = ''
    getLists()
}
</script>

<style scoped lang="scss">
/* 保留斑马纹的同时添加悬停效果 */
:deep().el-table--striped .el-table__body tr.el-table__row--striped:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}

:deep().el-table__body tr:hover td {
  background-color: #a5b8f4; /* 悬停时的红色 */
}
</style>